<nz-card
  style="width: 100%"
  nzSize="small"
  [nzTitle]="cardTitleTemplate"
  [nzExtra]="extraTemplate"
  [nzActions]="
    unit.buyPrice?.prices?.length === 0
      ? []
      : showModBtn && unit.modStack && unit.maxMods.gt(0)
      ? [buyOne, buyMax, mod]
      : showModBtn && building && hasDepartments && building.maxDepartments > 0
      ? [buyOne, buyMax, dep]
      : [buyOne, buyMax]
  "
>
  <p *ngIf="os.showDescriptions && unit.description !== ''">
    {{ unit.description }}
  </p>

  <nz-alert
    *ngIf="
      detailView && (unit.id === 'e' || unit.id === 'm') && unit.quantity.lt(30)
    "
    nzType="info"
    nzMessage="Buy 30 or more to unlock new stuff."
    nzShowIcon
  >
  </nz-alert>

  <app-district-info *ngIf="isDistrict" [district]="unit"></app-district-info>

  <div *ngIf="unit.production.length > 0">
    <div *ngIf="os.showDronesStatus" class="drone-status">
      <nz-alert
        *ngIf="!unit.isLimited && unit.operativity == 100"
        class="mg-top"
        nzType="success"
        nzMessage="100% Operative"
        nzShowIcon
      ></nz-alert>
      <nz-alert
        *ngIf="
          !unit.isLimited && unit.operativity > 0 && unit.operativity < 100
        "
        class="mg-top"
        nzType="warning"
        [nzMessage]="notFull"
        nzShowIcon
      ></nz-alert>
      <ng-template #notFull>
        {{ unit.operativity }} % Operative
        <button
          type="button"
          style="width: auto"
          class="ant-alert-close-icon"
          (click)="unit.operativity = 100"
        >
          <span class="ant-alert-close-text">Set 100%</span>
        </button>
      </ng-template>
      <nz-alert
        *ngIf="!unit.isLimited && unit.operativity <= 0"
        class="mg-top"
        nzType="error"
        [nzMessage]="stopped"
        nzShowIcon
      ></nz-alert>
      <ng-template #stopped>
        Stopped
        <button
          type="button"
          style="width: auto"
          class="ant-alert-close-icon"
          (click)="unit.operativity = 100"
        >
          <span class="ant-alert-close-text">Set 100%</span>
        </button>
      </ng-template>
      <nz-alert
        *ngIf="unit.isLimited"
        class="mg-top"
        nzType="info"
        nzMessage="Waiting for work"
        nzShowIcon
      ></nz-alert>
    </div>

    <nz-slider
      [(ngModel)]="unit.operativity"
      [nzDisabled]="sliderDisabled"
      [nzStep]="0.1"
    ></nz-slider>

    <!-- Priority -->
    <!-- class="priority" -->
    <form
      nz-form
      nzLayout="inline"
      *ngIf="ms.game.resourceManager.components.unlocked"
    >
      <nz-form-item>
        <nz-form-label
          nz-popover
          nzPopoverTitle="Components Assembly Priority"
          [nzPopoverContent]="priorityTemplate"
          >Comp. priorities
          <i
            nz-icon
            nzType="question-circle"
            nzTheme="outline"
            class="question-icon"
          ></i>
        </nz-form-label>
        <nz-form-control>
          <nz-input-group nzCompact>
            <nz-input-number
              [(ngModel)]="unit.assemblyPriority"
              [nzSize]="'small'"
              [nzMin]="0"
              [nzMax]="1e3"
              [nzStep]="1"
              [name]="unit.id + 'p1'"
            >
            </nz-input-number>
            <nz-input-number
              [(ngModel)]="unit.assemblyPriorityEnding"
              [nzSize]="'small'"
              [nzMin]="0"
              [nzMax]="1e3"
              [nzStep]="1"
              [name]="unit.id + 'p2'"
            >
            </nz-input-number>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
    </form>
    <div
      *ngIf="
        os.showComponentsInfo && ms.game.resourceManager.components.unlocked
      "
      class="text-secondary"
    >
      <!-- <i
        nz-icon
        nzType="fa-s:microchip"
        nz-tooltip
        nzTooltipPlacement="right"
        nzTitle="Stored components, when full a new drone is created."
      ></i> -->
      <span
        nz-tooltip
        nzTooltipPlacement="right"
        nzTooltipTitle="Stored components, when full a new drone is created."
      >
        Components
        <i
          nz-icon
          nzType="question-circle"
          nzTheme="outline"
          class="question-icon"
        ></i
        >:
      </span>
      <span class="monospace">
        {{ unit.storedComponents | format }}/{{
          unit.components | format: true
        }}
        {{ unit.componentPercent | percent: "2.0-0" }}
      </span>
      <!-- <app-progress [progress]="unit.componentPercent"></app-progress> -->
    </div>
  </div>

  <ng-template #priorityTemplate>
    <p>
      Priorities for assembling new drones with components.<br />
      The first item is the normal priority,<br />the second is used when
      resources are ending.
    </p>
  </ng-template>

  <app-auto-building
    *ngIf="building?.autoBuyer && ms.game.automationUnlocked"
    [autoBuilding]="building?.autoBuyer"
  ></app-auto-building>
  <app-auto-worker
    *ngIf="unit?.autoBuyer && !building && ms.game.automationUnlocked"
    [autoWorker]="unit?.autoBuyer"
  ></app-auto-worker>
</nz-card>

<ng-template #extraTemplate>
  <span class="info-icon" *ngIf="unit.production.length > 0">
    <span
      nz-popover
      [nzPopoverContent]="contentTemplate"
      [nzPopoverTrigger]="popoverTrigger"
      (click)="createModal(contentTemplate, tplFooter)"
    >
      <!-- [nzPopoverTitle]="titleTemplate" -->
      <i nz-icon nzType="info-circle" nzTheme="outline"></i>
    </span>
  </span>
</ng-template>

<ng-template #cardTitleTemplate>
  <nz-card-meta
    *ngIf="!os.compactCardHeader; else smallHeader"
    [nzAvatar]="avatarTemplate"
    [nzTitle]="title"
    [nzDescription]="description"
  ></nz-card-meta>
</ng-template>

<ng-template #smallHeader>
  <span>
    <i nz-icon [nzType]="unit.icon" [ngClass]="unit.colorClass"></i>
    <strong> {{ unit.name }}</strong>
    <span
      *ngIf="unit.manualBought.gt(0)"
      class="monospace text-secondary"
      nz-tooltip
      nzTooltipTitle="Manual buy quantity, this number increase the price."
    >
      ({{ unit.manualBought | format: true }})</span
    >
    <span
      class="monospace text-secondary"
      [class.text-danger]="unit.limit.lte(unit.quantity)"
      nz-popover
      [nzPopoverContent]="limitPopover"
    >
      {{ unit.quantityUi | format: true }}
      <span *ngIf="unit.limit.lt(Decimal.MAX_VALUE)">
        /{{ unit.limit | format: true }}
      </span>
    </span>
  </span>
</ng-template>

<ng-template #avatarTemplate>
  <i nz-icon [nzType]="unit.icon" [ngClass]="unit.colorClass"></i>
</ng-template>
<ng-template #title>
  <span> {{ unit.name }}</span>
</ng-template>
<ng-template #description>
  <span
    *ngIf="unit.manualBought.gt(0)"
    class="monospace text-secondary"
    nz-tooltip
    nzTooltipTitle="Manual buy quantity, this number increase the price."
  >
    ({{ unit.manualBought | format: true }})</span
  >
  <span
    class="monospace"
    nz-popover
    [nzPopoverContent]="limitPopover"
    [class.text-danger]="unit.limit.lte(unit.quantity)"
  >
    {{ unit.quantityUi | format: true }}
    <span *ngIf="unit.limit.lt(Decimal.MAX_VALUE)">
      /{{ unit.limit | format: true }}
    </span>
  </span>
</ng-template>

<ng-template #titleTemplate>
  <i nz-icon nzType="table"></i> Production</ng-template
>

<!-- Production Table -->
<ng-template #contentTemplate>
  <app-prod-table [unit]="unit"></app-prod-table>
</ng-template>

<ng-template #priceTemplateOne>
  <app-prices [unit]="unit" [quantity]="ONE"></app-prices>
</ng-template>
<ng-template #priceTemplateMax>
  <app-prices [unit]="unit" [quantity]="customBuy"></app-prices>
</ng-template>

<!-- Buttons -->
<ng-template #buyOne>
  <div
    *ngIf="unit.buyPrice.canBuy; else buyOneDisabled"
    nz-popover
    [nzPopoverContent]="priceTemplateOne"
    nzPopoverTrigger="hover"
    nzPopoverPlacement="bottom"
    (click)="buyOneAct()"
  >
    <span>
      Buy &nbsp;
      <span class="monospace">1</span>
    </span>
  </div>
</ng-template>

<ng-template #buyOneDisabled>
  <div
    nz-popover
    [nzPopoverContent]="priceTemplateOne"
    nzPopoverTrigger="hover"
    nzPopoverPlacement="bottom"
    nz-typography
    nzDisabled
  >
    <span>
      Buy &nbsp;
      <span class="monospace">1</span>
    </span>
  </div>
</ng-template>

<ng-template #buyMax>
  <div
    *ngIf="unit.buyPrice.canBuy; else buyMaxDisabled"
    nz-popover
    [nzPopoverContent]="priceTemplateMax"
    nzPopoverTrigger="hover"
    nzPopoverPlacement="bottom"
    (click)="buyCustom()"
  >
    <span>
      Buy &nbsp;<span class="monospace">{{ customBuy | format: true }}</span>
    </span>
  </div>
</ng-template>
<ng-template #buyMaxDisabled>
  <div
    nz-popover
    [nzPopoverContent]="priceTemplateMax"
    nzPopoverTrigger="hover"
    nzPopoverPlacement="bottom"
    nz-typography
    nzDisabled
  >
    <span>
      Buy &nbsp;<span class="monospace">{{ customBuy | format: true }}</span>
    </span>
  </div>
</ng-template>

<ng-template #tplFooter>
  <button nz-button nzType="primary" (click)="destroyTplModal()" nzSize="small">
    <span>Ok</span>
  </button>
</ng-template>
<ng-template #mod>
  <div (click)="goModPage()">
    <i nz-icon nzType="fa-s:microchip"></i>
    <span class="monospace">
      {{ unit.modStack.used | format: true }} /{{
        unit.maxMods | format: true
      }}</span
    >
  </div>
</ng-template>
<ng-template #dep>
  <div *ngIf="building" (click)="goDepPage()">
    <i nz-icon nzType="fa-s:microchip"></i>
    <span class="monospace">
      {{ building.usedDepartments | format: true }} /{{
        building.maxDepartments | format: true
      }}</span
    >
  </div>
</ng-template>

<ng-template #limitPopover>
  <app-storage [unit]="unit"></app-storage>
</ng-template>
